<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8" />
		<title>扫码点餐</title>
		<link rel="stylesheet" href="./css/index.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.js"></script>
		<script src="js/request.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="ng-scope" v-show="tab==0">
				<!-- 系统标题 -->
				<div class="loca ng-scope">
					<a class="change ng-binding" href="javascript:vboid(0)">水立方餐厅-{{CDefault6}}</a>
				</div>
				<div class="content ng-scope">
					<!-- 左侧分类 -->
					<aside>
						<ul id="aside">
							<li @click="setNav(i)" v-for="(v,i) in nav" :key="v.Id"
								:class="GoodsTypeIndex==i?'active':''" class="table">
								<p>{{v.GoodsTypeName}}</p>
							</li>
						</ul>
					</aside>
					<!-- 右侧列表 -->
					<section v-if="nav.length>0">
						<ul class="lists show">
							<li class="on" v-for="v in nav[GoodsTypeIndex].goods" :key="v.Id">
								<div class="l view">
									<img :src="imgUrl + v.CDefault4" class="img-responsive" alt="...">
								</div>
								<div class="r">
									<p class="t">{{v.GoodsName}}</p>
									<p class="price">￥{{v.Price}}</p>
									<div class="jifen">{{v.GoodsTypeName}}</div>
									<div class="showaddcart">
										<div class="num_con">
											<img @click="v.FNum--;filterListFun()" v-if="v.FNum>0||v.isFocus"
												src="img/num_l.png" class="img-responsive num_l" alt="...">
											<input v-if="v.FNum>0||v.isFocus" class="number" v-model="v.FNum"
												@blur="v.isFocus=false;filterListFun()" @focus="v.isFocus=true" />
											<img @click="v.FNum++;filterListFun()" src="img/num_r.png"
												class="img-responsive num_r" alt="...">
										</div>
									</div>
								</div>
							</li>
						</ul>
					</section>
					<div class="clear"></div>
				</div>
			</div>
			<iframe src="order.html" v-if="tab==1" frameborder="no" border="0"></iframe>
			<!-- 底部购物车 -->
			<div class="cart ng-scope">
				<div class="cr" @click="AddMurnauOrder"><a
						href="javascript:void(0)">{{payType==1?'结算':(noPay.length>0?'加菜':'下单')}}</a>
				</div>
				<div class="cr payBtn" @click="wxPayNew" v-if="payType==2&&noPay.length>0"><a
						href="javascript:void(0)">支付</a>
				</div>
				<div class="cl ng-binding">
					￥<label id="totalmoney">{{price}}</label>
				</div>
				<i id="totalcartnumber" class="ng-binding cartnum">{{filterList.length}}</i>
				<a href="javascript:void(0)"><img @click="showCart=!showCart" class="cart-img" src="img/shop_cart01.png"
						alt="..."></a>
			</div>
			<div class="posf" v-if="filterList.length>0" @click="showCart=!showCart"
				:style="`height:${showCart?'100vh':'0'}`">
				<div class="posa" @click.stop="">
					<ul class="lists show">
						<li class="on" v-for="v in filterList" :key="v.Id">
							<div class="l view">
								<img :src="imgUrl + v.CDefault4" class="img-responsive" alt="...">
							</div>
							<div class="r">
								<p class="t">{{v.GoodsName}}</p>
								<p class="price">￥{{v.Price}}</p>
								<div class="jifen">{{v.GoodsTypeName}}</div>
								<div class="showaddcart">
									<div class="num_con">
										<img @click="v.FNum--" v-if="v.FNum>0||v.isFocus" src="img/num_l.png"
											class="img-responsive num_l" alt="...">
										<input v-if="v.FNum>0||v.isFocus" class="number" v-model="v.FNum"
											@blur="v.isFocus=false;filterListFun()" @focus="v.isFocus=true" />
										<img @click="v.FNum++" src="img/num_r.png" class="img-responsive num_r"
											alt="...">
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>

			</div>
			<!-- 底部导航栏 -->
			<nav class="ng-scope">
				<ul class="nav">
					<li @click="tab=0">
						<a href="javascript:void(0)">
							<img src="img/foot01.png" alt="">
							<p>下单</p>
						</a>
					</li>
					<li @click="tab=1">
						<a href="javascript:void(0)">
							<img src="img/foot04.png" alt="">
							<p>订单</p>
						</a>
					</li>
				</ul>
			</nav>
			<div class="alert-wrapper" v-if="loading">
				<div class="alert-inner">
					<img src="img/load.gif" alt="" class="load-icon"/>
					加载中请稍后...
				</div>
			</div>
		</div>
		<script src="./js/md5.min.js"></script>
		<script>
			const App = {
				data() {
					return {
						nav: [],
						GoodsTypeIndex: 0,
						goods: [],
						imgUrl,
						showCart: false,
						tab: 0,
						CDefault6: '',
						CDefault4: '',
						openid: '',
						filterList: [],
						price: 0,
						// 1：直接结算；2，直接落单，单独调用支付接口
						payType: '1',
						noPay: [],
						HouseNo: '',
						loading: false
					}
				},
				created() {

					this.CDefault4 = this.getUrlSearch('CDefault4') || localStorage.getItem('CDefault4')
					this.CDefault6 = this.getUrlSearch('CDefault6') || localStorage.getItem('CDefault6')
					this.openid = this.getUrlSearch('openid')
					localStorage.setItem('CDefault4', this.CDefault4)
					localStorage.setItem('CDefault6', this.CDefault6)
					this.GetMurnauNew()
					// 如果是微信回调
					if (this.openid) {
						localStorage.setItem('openid', this.openid)
					} else {
						this.wxlogin()
					}

				},
				methods: {
					// 包间支付
					wxPayNew() {
						if (this.loading) {
							return
						}
						this.loading = true
						http(`api/goods/PZFSSLLKK?OrderNo=${this.noPay[0].OrderNo}&type=1&zhuoHao=${this.CDefault4}&openid=${localStorage.getItem('openid')}`,
							null, r => {
								this.wxPay(r)
							}, 'POST')
					},

					// 微信支付
					wxPay(r) {
						let that = this
						this.loading = false
						function onBridgeReady() {
							WeixinJSBridge.invoke('getBrandWCPayRequest', {
									"appId": r.appId, //公众号ID，由商户传入     
									"timeStamp": r.timeStamp, //时间戳，自1970年以来的秒数     
									"nonceStr": r.nonceStr, //随机串     
									"package": r.package,
									"signType": r.signType, //微信签名方式：     
									"paySign": r.paySign
								},
								function(res) {
									
									http(`/api/goods/OutMurnauOrder?OrderNo=${r.OrderNo}&ClientNo=&_timestamp=&_sign=&token=`,
										null)
									if (res.err_msg == "get_brand_wcpay_request:ok") {
										// 使用以上方式判断前端返回,微信团队郑重提示：
										//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
										alert('点餐成功')
										that.clearGoods()
									} else {
										alert('支付失败')
									}

								});
						}
						if (typeof WeixinJSBridge == "undefined") {
							if (document.addEventListener) {
								document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
							} else if (document.attachEvent) {
								document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
								document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
							}
						} else {
							onBridgeReady();
						}
					},
					// 跳转微信授权
					wxlogin() {
						const url =
							`${baseUrl}/api/goods/GetOpenidCanYin?redirect_uri=${redirect_uri}`
						window.location.href = url
					},
					// 获取格式化日期
					formatTime(date) {
						const year = date.getFullYear()
						const month = date.getMonth() + 1
						const day = date.getDate()
						const hour = date.getHours()
						const minute = date.getMinutes()
						const second = date.getSeconds()

						return `${[year, month, day].map(formatNumber).join('-')} ${[hour, minute, second].map(formatNumber).join(':')}`
					},
					// 提交订单
					AddMurnauOrder() {
						if (this.filterList.length == 0) {
							alert('请选择商品')
							return
						}
						if (this.loading) {
							return
						}
						this.loading = true
						http('/api/goods/AddMurnauOrder?HouseNo=' + this.HouseNo, {
							HouseNo: this.HouseNo,
							CDefault7: this.price,
							CDefault8: 0,
							payOpenid: localStorage.getItem('openid'),
							Data: this.filterList.map(v => {
								return {
									"CDefault9": localStorage.getItem('openid'), //openid 
									"GoodsType": v.GoodsType, //餐饮商品类别
									"GoodsNo": v.GoodsNo, //餐饮商品编号
									"GoodsName": v.GoodsName, //餐饮商品名称
									"OrderPrice": v.Price, //餐饮金额  decimal 单位元
									"RealPrice": v.Price, //餐饮金额  decimal 单位元
									"GoodsSpec": "", //餐饮商品规格
									"FNum": v.FNum, //餐饮商品数量
									"Description": "", //下单备注
									"CDefault4": this.CDefault4, //桌位号
									"CDefault5": "堂食", //堂食  默认传：堂食
									"CDefault6": this.CDefault6 //桌位名称
								}
							})
						}, (r) => {
							this.loading = false
							console.log(r)
							r = r || {}
							if (this.payType == 1) {
								this.wxPay(r)
							} else {
								alert('点餐成功')
								this.clearGoods()
								this.GetOrder()
							}

						}, 'POST')
					},
					// 清空购物车
					clearGoods() {
						this.nav.map(n => {
							n.goods = n.goods.map(g => {
								g.FNum = 0
								return g
							})
							return n
						})
						this.filterListFun()
					},
					// 获取no
					GetMurnauNew() {
						http('/api/goods/GetMurnauNew?MurnauNo=' + this.CDefault4, null, (r) => {
							this.payType = r.CDefault1
							this.HouseNo = r.HouseNo
							this.GetGoodsType()
						})
					},
					// 查询分类
					GetGoodsType() {
						http('/api/goods/GetGoodsType?HouseNo=' + this.HouseNo, null, (r) => {
							this.nav = r.map(c => {
								c.goods = []
								return c
							})
							this.GetGoodsInfo()
							this.GetOrder()
						})

					},
					// 查询该座位是否有订单
					GetOrder() {
						http('/api/goods/GetOrder?type=餐厅订单&StatusNo=STATUS01&MurnauNo=' + this.CDefault4, null, (r) => {
							const noPay = r.filter(f => {
								return f.StatusName == '未支付'
							})
							this.noPay = noPay
							console.log(this.noPay)
						})
					},
					// 查询分类下商品
					GetGoodsInfo() {
						if (this.nav[this.GoodsTypeIndex].goods.length != 0) {
							return
						}
						http('/api/goods/GetGoodsInfo?HouseNo=' + this.HouseNo + '&GoodsTypeNo=' + this.nav[this
								.GoodsTypeIndex]
							.GoodsTypeNo, null, (r) => {
								this.nav[this.GoodsTypeIndex].goods = r.map(v => {
									v.FNum = 0
									return v
								})
							})
					},
					// 商品总数
					filterListFun() {
						let list = []
						this.nav.forEach(n => {
							list = list.concat(n.goods)
						})
						list = list.filter(v => {
							return v.FNum > 0
						})
						sessionStorage.setItem("cart", JSON.stringify(list));
						this.filterList = list

						let price = 0
						this.filterList.forEach(v => {
							return price += v.FNum * v.Price
						})
						this.price = price.toFixed(2)
					},
					// 切换分类
					setNav(i) {
						this.GoodsTypeIndex = i
						this.GetGoodsInfo()
					},
					// 获取地址栏参数
					getUrlSearch(name) {
						// 未传参，返回空
						if (!name) return null;
						// 查询参数：先通过search取值，如果取不到就通过hash来取
						var after = window.location.search;
						after = after.substr(1) || window.location.hash.split('?')[1];
						// 地址栏URL没有查询参数，返回空
						if (!after) return null;
						// 如果查询参数中没有"name"，返回空
						if (after.indexOf(name) === -1) return null;

						var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
						// 当地址栏参数存在中文时，需要解码，不然会乱码
						var r = decodeURI(after).match(reg);
						// 如果url中"name"没有值，返回空
						if (!r) return null;

						return r[2];
					}
				}
			};
			Vue.createApp(App).mount('#app');
		</script>
	</body>
</html>